<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>调岗</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <link href="/dist/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=8e9c5bb62">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=66b457d6">

    <style type="text/css">
        td div{
            float:left;
            text-align: center;
            height: 100%;
        }
        .table-detail td{
            text-align: left;
            padding-left: 0px !important;
            padding-right: 0px !important;
        }
        .table-detail td.pleft{
            padding-left: 6px !important;;
        }
        .fj{
            color:#74adf2;
            cursor: pointer;
        }
        .rightBorder{
            border-left:1px solid #e8e8e9;
        }
        .table-detail{
            width: 560px;
            margin: 0 auto;
        }
        .table-detail .entryTitle,.table-detail .td-title{
            font-weight: bold;
            width: 80px;
            text-align: center;
        }
        .fj {
            color: #74adf2;
            cursor: pointer;
            padding-left: 6px;
            width: 100%;
        }
        .webuploader-pick {
            position: relative;
            display: inline-block;
            cursor: pointer;
            background: none;
            padding: 0;
            color: #74adf2;
            width: 100%;
            text-align: left;
        }
        .entryTitle {
            font-weight: bold;
            width: 80px;
            background-color: #F5F5F5;
        }
        td .lookFj{
            width: 100%;
            color:#74adf2;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            position: relative;
            cursor: pointer;
            background: url(/dist/img/upload_normal.gif) no-repeat 6px center;
            padding-left: 24px !important;
            text-align: left;
        }
        .delfile{
            position: absolute;
            right: 0;
            top: 0;
            width: 15px;
            height: 100%;
            line-height: 24px;
            text-align: center;
            font-size: 14px;
            border-radius: 50%;
            background: #fff;
            z-index: 1111111;
            color: #bbb;
            cursor: pointer;
        }
        .delfile:hover{
            color:red;
        }
        .fujian {
            display: inline-block;
            cursor: pointer;
            padding-left: 38px;
            background: url(/dist/img/fujian.png) no-repeat 20px center;
            color: #2a8cec;
        }
        td input{
            color:#2a8cec;
        }

    </style>
</head>
<body>
<iframe id="ifAttach" style="display:none"></iframe>
<ul class="ztree" id="ulZTree"
    style="z-index:999;display:none;position:absolute;background-color:white;border:1px solid #72C3D9;height:200px;margin-top:0px;margin-left:0px;padding-left:0px;padding-top:5px;padding-bottom:5px;padding-right:0px;margin-right:0px;margin-bottom:0px;overflow: auto;"></ul>
<section class="content" id="app" @click="hideZTree">
    <div  >
        <table class="table-detail">
            <tr>
                <td class="td-title" colspan="4" style="background: yellow;color: black;">调岗信息</td>
            </tr>
            <tr>
                <td class="entryTitle">调岗日期</td>
                <td colspan="3"><input type="text" v-model="changePost.noticeDate" @focus="showDatePicker($event)" placeholder="请选择时间"/></td>
            </tr>
            <tr>
                <td class="entryTitle ">原部门-职位</td>
                <td class="pleft">{{original.roleName}}</td>
                <td class="entryTitle" >现部门-职位</td>
                <td><input type="text"  @click.stop="showZTree(changePost.user,$event)" @focus.stop="showZTree(changePost.user,$event)" v-model="changePost.user.roleName"/></td>
            </tr>
            <tr>
                <td class="entryTitle">原上级</td>
                <td class="pleft">{{original.parentName}}</td>
                <td class="entryTitle" >现上级</td>
                <td><input   type="text" :value="changePost.user.parentName" id="txtParent" @blur="testParent"/></td>
            </tr>
            <tr>
                <td class="entryTitle">工作交接表</td>
                <td colspan="3">
                    <div class="lookFj pleft" v-if="changePost.positionAttachName" :attrUrl="changePost.positionAttachUrl">
                        {{changePost.positionAttachName}}
                        <div class="delfile" v-on:click="deleteFile('positionAttach')">x</div>
                    </div>
                    <div class="fj fujian" id="positionAttach">上传附件</div>
                </td>
            </tr>
        </table>
    </div>
    <div  style="height:30px;line-height:30px;text-align: center;z-index:999;padding-top:5px;">
        <input type="button" value="保存"   @click="save()" class="btn oaBtn btn-sm" style="margin-top:5px;">
    </div>
</section>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=0b5caf39"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=fff81c63"></script>
<script type="text/javascript" src="/dist/plugins/select2/select2.min.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<!--ztree组件所需js-->
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.exhide-3.5.js"></script>
<script>
    var zTreeCallback = {
        onClick: function (event, treeId, treeNode) {
            if (treeNode.type === "role") {
                roleGlobal.roleId = treeNode.dataId;
                var node = app.treeObj.getNodeByParam("id", treeNode.departId, null);
                console.log(node)
                roleGlobal.roleName = node.name+"-"+treeNode.name;
                $("#ulZTree").hide();
            }
        }
    };
    var zTreeSetting = {
        view: {
            showIcon: function (treeId,treeNode) {
                return treeNode.isParent;
            }
        },
        data: {
            simpleData: {
                enable: true
            },
            keep: {
                parent: true
            }
        },
        callback: {
            onClick: zTreeCallback.onClick
        }
    };
</script>
<script type="text/javascript">
    var api = frameElement.api, W = api.opener;
    var roleGlobal = null;
    var app = new Vue({
        el: '#app',
        data: {
            pageType: '1',
            original:"",
            changePost: {
                userId:$.wyui.page.urlParams.id,
                userName:'',
                description:'',
                senderId:getCurrentUser().id,
                senderName:getCurrentUser().name,
                noticeDate:"",
                positionAttachName:'',
                positionAttachUrl:'',
                user:{
                    id: $.wyui.page.urlParams.id,
                    roleId: '',//职位ID
                    roleName: '',
                    parentId: '',
                    parentName:''
                }
            }
        },
        methods: {
            download: function (src,name) {
                downloadFile(attachId,fileName)
                return false;
            },
            testParent:function () {
                var that = this;
                setTimeout(function () {
                    if(that.changePost.user.parentName != $("#txtParent").val()){
                        alert("请重新填写上级");
                        $("#txtParent").val(that.changePost.user.parentName);
                    }
                },300)

            },
            showZTree: function (role, e) {
                if(this.pageType == '2') return;
                roleGlobal = role;
                var $obj = $(e.target);
                var offset = $obj.offset();
                $("#ulZTree").css({
                    left: (offset.left - 1) + "px",
                    top: (offset.top + $obj.outerHeight() + 1) + "px",
                    width: ($obj.outerWidth() + 2) + "px",
                    height:"150px"
                }).slideDown("fast");
            },
            hideZTree: function () {
                $("#ulZTree").hide();
            },
            showDatePicker: function (e) {
                var that = this;
                WdatePicker({
                    onpicked: function (dp) {
                        that.changePost.noticeDate = dp.cal.getNewDateStr();
                        return true;
                    },
                    //dateFmt:'yyyy-MM-dd HH:mm'
                });
                $(e.target).blur();
            },
            save: function () {
                var self = this;
                self.changePost.description='岗位由'+self.original.roleName+"调至到"+self.changePost.user.roleName;
                self.changePost.userName=self.original.name;
                $.wyui.postMethod(urlConfig.system.user.userDesc, self.changePost, function (r) {
                    alert("保存成功");
                    api.close();
                });



            }, deleteFile: function (item) {
                console.log(item)
                this.changePost.user[item + "Name"] = "";
                this.changePost.user[item + "Url"] = "";
                $("#" + item).show();
            }
        },
        mounted: function () {
            var that = this;
            $.wyui.postMethod(urlConfig.system.system.getOrgTreeNodesByUserId, {userId: getCurrentUser().id}, function (nodes) {
                that.treeObj = $.fn.zTree.init($("#ulZTree"), zTreeSetting, nodes);
            });
            //初始化上传控件

            $.wyui.postMethod(urlConfig.system.user.getById, {userId: $.wyui.page.urlParams.id}, function (r) {
                that.original=r;
                console.log(r)
            });
            $(".fj").each(function () {
                var demo = $(this);
                var name = demo.attr("id");
                var nameValue = name + "Name";
                console.log(that.user);

                var uploader = WebUploader.create({
                    // 选完文件后，是否自动上传。
                    auto: true,
                    // swf文件路径
                    swf: "/statics/plugin/webuploader-0.1.5/Uploader.swf",
                    // 文件接收服务端。
                    server: server.fjIp + "/attach/uploadFile.json",
                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                    pick: '#' + demo.attr("id"),
                    duplicate: true
                });

                uploader.on("uploadStart", function () {
                    $("#progress").show();
                });
                uploader.on("uploadComplete", function () {
                    $("#progress").hide();
                });
                // 文件上传成功，给item添加成功class, 用样式标记上传成功。
                uploader.on('uploadSuccess', function (file, response) {
                    console.log(demo);
                    var nameValue = name + "Name";
                    var urlValue = name + "Url";
                    app.changePost[nameValue] = response.name;
                    app.changePost[urlValue] = response.url;
                    $("#" + name).hide();
                });

                // 文件上传失败，显示上传出错。
                uploader.on('uploadError', function (file) {
                    alert("上传失败！");
                });

            });

        }
    });
    $(function () {
        $("#txtParent").autoComplete({
            url: server.ip + urlConfig.system.user.getTop10ByNameUser,
            render: function (users, panel) {
                for (var i = 0; i < users.length; i++) {
                    $("<li></li>").data("autoComplete",
                        users[i]).html("<a>" + users[i].name + "&nbsp;&nbsp;&nbsp;" +
                        "(" + "&nbsp;" + users[i].companyName + "-" + users[i].departName + "-" + users[i].roleName + "&nbsp;" + ") " + "</a>")
                        .appendTo(panel);
                }
            },
            selected: function (user) {
                console.log(user);
                app.changePost.user.parentId = user.id;
                app.changePost.user.parentName = user.name;
                return false;
            },
            height: 100,
            width: 250
        });
    });
</script>
</body>
</html>